<template>
    <div class="avatars">
        <div class="avatar">
            <img src="../img/03.png" alt="用户头像" />
            <div>点击更换</div>
            <el-form :model="userInfo" :inline="true" class="demo-form-inline mt-20">
                <el-form-item  label="用户名:">
                    <el-input placeholder="admin" />
                </el-form-item>
                <el-form-item label="生日:">
                    <el-date-picker v-model="userInfo.birth" type="date" placeholder="选择日期"
                        :default-value="new Date(2000, 9, 1)" />
                </el-form-item>
            </el-form>
            <el-form :inline="true" class="demo-form-inline mt-20">
                <el-form-item label="性别:">
                    <el-radio-group v-model="userInfo.sex" size="large">
                        <el-radio-button label="男" />
                        <el-radio-button label="女" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="城市:">
                    <el-select placeholder="北京" v-model="userInfo.city">
                        <el-option :label="item" v-for="(item, index) in cityAll" :key="index" :value="index" />
                    </el-select>
                </el-form-item>
                <el-form :inline="true" class="demo-form-inline mt-20">
                    <el-form-item label="成长等级:">
                        <el-button type="primary" size="small">lv.1</el-button>
                    </el-form-item>
                    <el-form-item label="技术水平:">
                        <el-select v-model="userInfo.skill" placeholder="零基础">
                            <el-option v-for="item in skillAll" :key="item.value" :label="item.label"
                                :value="item.value">
                                <span style="float: left">{{ item.label }}</span>
                                <span
                                    style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{ item.value }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" class="demo-form-inline mt-20">
                    <div class="hobby">
                        兴趣技能:
                        <el-tag class="tag" closable :disable-transitions="false" v-for="item in interesTagList"
                            :key="item.id">
                            {{ item.name }}
                        </el-tag>
                        <el-button class="button-new-tag addTag" @click="dialogVisible = true">
                            请选择
                        </el-button>
                    </div>
                </el-form>
                <button type="button" class="btn" @click="save">保存</button>
            </el-form>
        </div>

        <!-- 弹出框 -->
        <el-dialog class="el-dialog-box" title="选择我的兴趣技能" width="70%" v-model="dialogVisible">
            <span>例如舞蹈就选舞种</span>
            <br />
            <el-input style="margin-top: 20px; width: 180px" class="w-50 m-2" size="large" placeholder="搜索兴趣技能"
                :prefix-icon="Search" v-model="searchValueNow" />
            <el-button @click="search" plain size="large" style="margin-top: 20px; margin-left: 20px">搜索</el-button>
            <br />
            <p style="margin-top: 20px">推荐兴趣技能</p>

            <!-- 搜索结果 -->
            <div class="searchResult" v-if="searchIsShow === true">
                <div>
                    <div class="searchItem" v-for="item in searchInterestList" :key="item.id" @click="addTag(item)">
                        <div class="searchItemLeft">
                            <div class="searchItemLeftBox">
                                <el-icon :size="25">
                                    <BellFilled />
                                </el-icon>
                            </div>
                        </div>
                        <div class="searchItemMid">
                            <br />
                            <div class="searchItemMidTop">{{ item.name }}</div>
                            <div class="searchItemMidBottom">{{ item.description }}</div>
                        </div>
                        <div class="searchItemRight">
                            <el-icon :size="25">
                                <FolderAdd />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 兴趣列表展示 -->
            <div v-if="searchIsShow === false">
                <div>
                    <el-tag v-for="(item, index) in interesTagList" :key="item.id" class="selectedInteresItem"
                        @click="deleteTag(index)">{{ item.name }}</el-tag>
                </div>
                <div infinite-scroll-distance="1" v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
                    <el-tag v-for="item in tagList" :key="item.id" class="infinite-list-item" @click="addTag(item)">{{
                            item.name
                    }}</el-tag>
                </div>
            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button class="cancel" size="large" @click="dialogVisible = false">取消</el-button>
                    <el-button class="confrim" size="large" type="primary" @click="dialogVisible = false">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>

</template>
    
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
    name: "Mydata",
});
</script>
    
<script setup lang="ts">
import { ref } from "vue";
import { onMounted } from "vue";
import { storeToRefs } from "pinia";
import { ElInput, ElMessage } from "element-plus";
import { useUserInfoStore } from "@/store/modules/userInfo/userInfo";

import { Search } from "@element-plus/icons-vue";
import { useIndexStore } from "@/store/modules/index/index";

const store = useUserInfoStore();
const userInfo = ref({
    birth: "",
    sex: "",
    city: "",
    lv: "",
    skill: "",
});
const cityAll = ref([
    "安徽",
    "北京",
    "重庆",
    "福建",
    "甘肃",
    "广东",
    "广西",
    "贵州",
    "海南",
    "河北",
    "黑龙",
    "河南",
    "湖北",
    "湖南",
    "内蒙",
    "江苏",
    "江西",
    "吉林",
    "辽宁",
    "澳门",
    "宁夏",
    "青海",
    "陕西",
    "山东",
    "上海",
    "山西",
    "四川",
    "台湾",
    "天津",
    "西藏",
    "香港",
    "新疆",
    "云南",
    "浙江",
    "钓鱼",
    "海外",
]);
const skillAll = ref([
    { value: "零基础小白", label: "零基础" },
    { value: "业余初级", label: "0-1年学" },
    { value: "业余中级", label: "1-2年学" },
    { value: "业余高级", label: "2-4年学" },
    { value: "专业初级", label: "4-6年学" },
    { value: "专业中级", label: "6-8年学" },
    { value: "专业高级", label: "8年以上" },
]);
const dialogVisible = ref(false);

//兴趣列表
const { getInterestListAsync, getNewInterestListAsync } = useIndexStore();
const { tagList, interesTagList } = storeToRefs(useIndexStore());
onMounted(() => {
    getInterestListAsync(1, 20);
});

// 兴趣列表tag加载
const pageNum = ref(1);

const load = () => {
    pageNum.value++;
    getNewInterestListAsync(pageNum.value, 8);
};

// 兴趣列表已选中
const addTag = (tag: any) => {
    if (interesTagList.value.length <= 7) {
        tag.description = "";
        interesTagList.value.push(tag);
        searchIsShow.value = false;
    } else {
        console.log("最多选7个");
    }
};
const deleteTag = (index: number) => {
    interesTagList.value.splice(index, 1);
};

// 兴趣列表搜索
const { getSearchInterest } = useIndexStore();
const { searchInterestList } = storeToRefs(useIndexStore());

const search = () => {
    getSearchInterest(searchValueNow.value);
    searchIsShow.value = true;
};
const searchValueNow = ref<string>("");
const searchIsShow = ref<boolean>(false);

//保存
const save = () => {
    ElMessage({
        message: "保存成功",
        type: "success",
    });
};

</script>
    
<style scoped lang="less">
.avatars {
    .avatar {
        text-align: center;

        img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
    }
}
.mt-20 {
    margin-top: 20px;
}

.tag {
    width: 100px;
    height: 40px;
    text-align: center;
    margin-left: 10px;
    font-size: 15px;
    color: black;
    background-color: #fff;
    border: solid 0.5px #eee;
}

.addTag {
    width: 100px;
    height: 40px;
    background-color: #eee;
    margin-left: 10px;
    border: none;
}

.btn {
    width: 150px;
    height: 50px;
    text-align: center;
    color: white;
    background-color: #f93684;
    border-radius: 4px;
    border: none;
    margin-top: 60px;
}

// 弹出框
.el-dialog-box {
    .selectedInteresItem {
        width: 100px;
        height: 40px;
        margin: 20px 10px;
        border-color: #eaecf0;
        background-color: #fff;
        color: #111;
    }

    .searchResult {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .searchItem {
            display: inline-block;
            background-color: #f5f7f9;
            width: 300px;
            height: 70px;
            margin: 10px 10px;

            .searchItemLeft {
                width: 60px;
                height: 100%;
                float: left;

                display: flex;
                justify-content: center;
                align-items: center;

                .searchItemLeftBox {
                    width: 40px;
                    height: 40px;
                    background-color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }

            .searchItemMid {
                height: 100%;
                width: 200px;
                float: left;

                .searchItemMidTop {
                    color: #111;
                    padding-bottom: 10px;
                }

                .searchItemMidBottom {
                    color: #848594;
                }
            }

            .searchItemRight {
                display: flex;
                justify-content: center;
                align-items: center;
                float: left;
                height: 100%;
                width: 40px;
            }
        }
    }

    .dialog-footer {
        .cancel {
            border-color: #dddfe5;
            width: 130px;
        }

        .confrim {
            background-color: #e54983;
            width: 130px;

            border-color: #dddfe5;
        }
    }
}
</style>

<style lang="less">
.infinite-list {
    height: 300px;
    padding: 0;
    margin: 0;
    margin-top: 20px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.infinite-list .infinite-list-item {
    width: 100px;
    height: 40px;
    margin: 20px 10px;
    border-color: #eaecf0;
    background-color: #fff;
    color: #111;
}

.infinite-list .infinite-list-item+.list-item {
    margin-top: 10px;
}
</style>
    